<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>签退页面</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="js/vue.js"></script>
  <script src="js/axios-0.18.0.js"></script>
  <script src="js/request.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <style>
    .container {
      margin: 100px 20px;
    }

    .name {
      margin: 10px;
    }

    .signout {
      margin-top: 50%;
      width: 100%;
    }

    .btn-signout {
      margin: 0 15%;
      width: 70%;
    }

    .stuName,
    .className {
      margin-top: 10px;
    }

    .el-radio.is-bordered+.el-radio.is-bordered {
      margin-left: 0px;
    }

    .el-radio-group {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
    }


    .el-radio {
      display: flex;
      margin-top: 20px;
      margin-right: 0;
    }

    .el-radio__label {
      display: block;
      width: 60px;
    }

    .el-dropdown-menu {
      height: 200px;
      overflow-y: scroll;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="container">
      <el-form ref="ruleForm" :rules="rules" :model="ruleForm">


        <el-form-item prop="speciality" label="专业">
          <el-radio-group v-model="ruleForm.speciality" size="medium" @input="getClassNames">
            <el-radio-button :label=item v-for="item in specialityNames" :key="item"></el-radio-button>
          </el-radio-group>
        </el-form-item>

        <el-form-item prop="stuClass" label="班级">
          <el-radio-group v-model="ruleForm.stuClass" size="medium" @input="getStuNames">
            <el-radio-button :label=item.studentClass v-for="item in classNames"
              :key="item.studentClass"></el-radio-button>
          </el-radio-group>
        </el-form-item>

        <el-form-item prop="name" label="姓名">
          <el-radio-group v-model="ruleForm.name" size="medium">
            <el-radio :label=item v-for="item in stuNames" :key="item"></el-radio>
          </el-radio-group>
          <div v-show="stuNames.length === 0">本班级无学生报名</div>
        </el-form-item>

        <el-form-item prop="book" label="课程">
          <el-radio-group v-model="ruleForm.book" size="medium" @input="getChapterNames">
            <el-radio-button :label=item v-for="item in bookNames" :key="item"></el-radio-button>
          </el-radio-group>
        </el-form-item>

        <el-form-item prop="chapter" label="章">
          <el-radio-group v-model="ruleForm.chapter" size="medium" @input="getContentNames">
            <el-radio-button :label=item.chapter v-for="item in chapterNames" :key="item.chapter"></el-radio-button>
          </el-radio-group>
        </el-form-item>

        <el-form-item prop="idChapter" label="节">
          <el-radio-group v-model="ruleForm.idChapter" size="medium">
            <el-radio :label=item v-for="item in contentNames" :key="item"></el-radio>
          </el-radio-group>
        </el-form-item>


      </el-form>

      <!-- 签到 -->
      <div class="signout">
        <el-button type="primary" round class="btn-signout"
          :disabled="ruleForm.name && ruleForm.idChapter ? false : true" @click="Signout">开始签退</el-button>
      </div>

    </div>
  </div>
  <script>
    new Vue({
      el: "#app",
      data() {
        return {
          name: '', // 姓名
          stuClasses: [], // 学生信息
          specialityNames: [], // 专业列表
          classNames: [], // 班级列表
          stuNames: [], // 学生列表
          stuBooks: [], // 课程信息
          bookNames: [], // 课程列表
          chapterNames: [], // 章列表
          contentNames: [], // 节列表
          ruleForm: {
            speciality: '', // 专业名称
            stuClass: '', // 班级名称
            name: '', // 学生姓名
            book: '', // 课程名称
            chapter: '', // 章名称
            idChapter: '' // 学习节数
          },
          rules: {
            speciality: [
              { required: true, message: '请选择专业', trigger: 'blur' }
            ],
            stuClass: [
              { required: true, message: '请选择班级', trigger: 'blur' }
            ],
            book: [
              { required: true, message: '请选择课程', trigger: 'blur' }
            ],
            chapter: [
              { required: true, message: '请选择章', trigger: 'blur' }
            ],
            idChapter: [
              { required: true, message: '请选择节', trigger: 'blur' }
            ],
            name: [
              { required: true, message: '请选择姓名', trigger: 'blur' }
            ]
          }
        }
      },
      mounted() {
        axios({
          method: 'GET',
          url: '/register/books'
        }).then(res => {
          this.stuClasses = res.data.data.names
          this.stuBooks = res.data.data.books
          this.iniState()
          this.getBookNames()
        })
      },
      methods: {

        iniState() {
          let set = new Set()
          this.stuClasses.forEach(item => {
            set.add(item.idClass)
          });
          this.specialityNames = [...set]

          //从localstory中载入上次的选择
          if (localStorage.getItem("speciality") != null) {
            this.ruleForm.speciality = localStorage.getItem("speciality");
            this.ruleForm.stuClass = localStorage.getItem("stuClass");
            this.ruleForm.name = localStorage.getItem("name");

            //根据本地存储，更新班级列表
            this.classNames = this.stuClasses.filter(item => item.idClass == this.ruleForm.speciality);
            //根据本地存储，更新学员列表
            this.stuNames = this.stuClasses.find(item => item.idClass == this.ruleForm.speciality && item.studentClass == this.ruleForm.stuClass).names
          }
          //没有默认选择第一个
          else {
            const [first] = set;
            this.ruleForm.speciality = first; //选择第一个专业333
            this.classNames = this.stuClasses.filter(item => item.idClass == this.ruleForm.speciality);
            this.ruleForm.stuClass = this.classNames[0].studentClass; //选择第一个班级
            this.stuNames = this.stuClasses.find(item => item.idClass == this.ruleForm.speciality && item.studentClass == this.ruleForm.stuClass).names
            if (this.stuNames.length != 0)
              this.ruleForm.name = this.stuNames[0];  //选择该班级的第一个同学
            else
              this.ruleForm.name = ''; //没有设置当前同学为空
          }

        },
        // 获取班级列表
        getClassNames() {
          //切换专业
          this.classNames = this.stuClasses.filter(item => item.idClass == this.ruleForm.speciality)
          //选择第一个班级
          this.ruleForm.stuClass = this.classNames[0].studentClass;
          this.stuNames = this.stuClasses.find(item => item.idClass == this.ruleForm.speciality && item.studentClass == this.ruleForm.stuClass).names
          //选择该班级的第一个同学
          if (this.stuNames.length != 0)
            this.ruleForm.name = this.stuNames[0];
          else
            this.ruleForm.name = '';
        },
        // 获取姓名列表
        getStuNames() {
          this.stuNames = this.stuClasses.find(item => item.idClass == this.ruleForm.speciality && item.studentClass == this.ruleForm.stuClass).names
          //选择该班级的第一个同学
          if (this.stuNames.length != 0)
            this.ruleForm.name = this.stuNames[0];
          else
            this.ruleForm.name = '';
        },

        // 获取课程列表
        getBookNames() {
          let set = new Set()
          this.stuBooks.forEach(item => {
            set.add(item.name)
          });
          this.bookNames = [...set]
          //从localstory中载入上次的选择
          if (localStorage.getItem("book") != null) {
            this.ruleForm.book = localStorage.getItem("book");
            this.ruleForm.chapter = localStorage.getItem("chapter");
            this.ruleForm.idChapter = localStorage.getItem("idChapter");

            //根据本地存储，更新章列表
            this.chapterNames = this.stuBooks.filter(item => item.name == this.ruleForm.book);
            //根据本地存储，更新节列表
            this.contentNames = this.stuBooks.find(item => item.name == this.ruleForm.book && item.chapter == this.ruleForm.chapter).content
          }
          //没有默认选择第一个
          else {
            const [first] = set;
            this.ruleForm.book = first; //选择第一个课程
            this.chapterNames = this.stuBooks.filter(item => item.name == this.ruleForm.book)
            this.ruleForm.chapter = this.chapterNames[0].chapter; //选择第一个章
            this.contentNames = this.stuBooks.find(item => item.name == this.ruleForm.book && item.chapter == this.ruleForm.chapter).content
            if (this.contentNames.length != 0)
              this.ruleForm.idChapter = this.contentNames[0]; //选择该章的第一节
            else
              this.ruleForm.idChapter = ''; //没有设置节数为空
          }
        },
        // 获取章数列表
        getChapterNames() {
          this.chapterNames = this.stuBooks.filter(item => item.name == this.ruleForm.book)
          //选择第一个章
          this.ruleForm.chapter = this.chapterNames[0].chapter
          this.contentNames = this.stuBooks.find(item => item.name == this.ruleForm.book && item.chapter == this.ruleForm.chapter).content
          //选择该章的第一节
          if (this.contentNames.length != 0)
            this.ruleForm.idChapter = this.contentNames[0];
          else
            this.ruleForm.idChapter = '';
        },
        // 获取节数列表
        getContentNames() {
          this.contentNames = this.stuBooks.find(item => item.name == this.ruleForm.book && item.chapter == this.ruleForm.chapter).content
          console.log(this.contentNames)
          //选择该章的第一节
          if (this.contentNames.length != 0)
            this.ruleForm.idChapter = this.contentNames[0];
          else
            this.ruleForm.idChapter = '';
        },

        // 签退
        Signout() {
          axios({
            method: 'POST',
            url: '/register/contain',
            data: {
              name: this.ruleForm.name,
              book: this.ruleForm.book,
              chapter: this.ruleForm.chapter,
              idChapter: this.ruleForm.idChapter
            }
          }).then(res => {
            if (res.data.code == 1) {
              //本地保存签签退信息
              localStorage.setItem("speciality", this.ruleForm.speciality);
              localStorage.setItem("stuClass", this.ruleForm.stuClass);
              localStorage.setItem("name", this.ruleForm.name);
              localStorage.setItem("book", this.ruleForm.book);
              localStorage.setItem("chapter", this.ruleForm.chapter);
              localStorage.setItem("idChapter", this.ruleForm.idChapter);
              this.$message({
                showClose: true,
                message: '签退成功！',
                type: 'success'
              });
              setTimeout(() => {
                location.href = './SuccessSignout.html'
              }, 1000);
            } else if (res.data.code == 0) {
              this.$message({
                showClose: true,
                message: '签退失败！请先签到！',
                type: 'error'
              });
            }
          })
        }
      }
    })
  </script>
</body>

</html>